<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <link rel="stylesheet" href="https://act.weixin.qq.com/static/cdn/css/wepayui/0.1.1/wepayui.min.css">
    <link rel="stylesheet" href="#(ctxPath)/static/css/pay.css">
    <link rel="stylesheet" href="#(ctxPath)/static/css/keyboard.css">
    <title>输入金额付款</title>
</head>
<!-- 
	通用说明： 
	1.模块的隐藏添加class:hide;
	2.body标签默认绑定ontouchstart事件，激活所有按钮的:active效果
-->
<body ontouchstart class="weui-wepay-pay-wrap">
<div class="weui-wepay-pay">
    <div class="weui-wepay-pay__bd">
        <div class="weui-wepay-pay__inner">
            <h1 class="weui-wepay-pay__title">付款金额(元)</h1>
            <div class="weui-wepay-pay__inputs"><strong class="weui-wepay-pay__strong">￥</strong>
                <input id="paymoney" type="text" class="weui-wepay-pay__input" placeholder="请输入金额"></div>
            <div class="weui-wepay-pay__intro">向商家询问支付金额</div>
        </div>
    </div>
    <div class="weui-wepay-pay__ft">
        <p class="weui-wepay-pay__info">支付金额给商户</p>
        <div class="weui-wepay-pay__btn">
            <img class="weui-btn"
                 src="https://act.weixin.qq.com/static/cdn/img/wepayui/0.1.1/wepay_logo_default_gray.svg" alt=""
                 height="16">
        </div>
    </div>
</div>
<div></div>
<div class="payinfo">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td class="paynum">1</td>
            <td class="paynum">2</td>
            <td class="paynum">3</td>
            <td id="pay-return">
                <div class="keybord-return"></div>
            </td>
        </tr>
        <tr>
            <td class="paynum">4</td>
            <td class="paynum">5</td>
            <td class="paynum">6</td>
            <td rowspan="3" class="pay">支付</td>
        </tr>
        <tr>
            <td class="paynum">7</td>
            <td class="paynum">8</td>
            <td class="paynum">9</td>
        </tr>
        <tr>
            <td id="pay-stop">
                <div class="keybord-stop"></div>
            </td>
            <td id="pay-zero">0</td>
            <td id="pay-float">.</td>
        </tr>
    </table>
</div>
</body>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="#(ctxPath)/static/layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        $(".payinfo").slideDown();
        var $paymoney = $("#paymoney");

        $("#pay-stop").click(function () {
            $(".payinfo").slideUp("fast");
        });

        $("#paymoney").focus(function () {
            $(".payinfo").slideDown();
            document.activeElement.blur();
        });

        $(".paynum").each(function () {
            $(this).click(function () {
                if (($paymoney.val()).indexOf(".") !== -1 && ($paymoney.val()).substring(($paymoney.val()).indexOf(".") + 1, ($paymoney.val()).length).length === 2) {
                    return;
                }
                if ($.trim($paymoney.val()) === "0") {
                    return;
                }
                $paymoney.val($paymoney.val() + $(this).text());
            });
        });

        $("#pay-return").click(function () {
            $paymoney.val(($paymoney.val()).substring(0, ($paymoney.val()).length - 1));
        });

        $("#pay-zero").click(function () {
            if (($paymoney.val()).indexOf(".") !== -1 && ($paymoney.val()).substring(($paymoney.val()).indexOf(".") + 1, ($paymoney.val()).length).length === 2) {
                return;
            }
            if ($.trim($paymoney.val()) === "0") {
                return;
            }
            $paymoney.val($paymoney.val() + $(this).text());
        });

        $("#pay-float").click(function () {
            if ($.trim($paymoney.val()) === "") {
                return;
            }

            if (($paymoney.val()).indexOf(".") !== -1) {
                return;
            }

            if (($paymoney.val()).indexOf(".") !== -1) {
                return;
            }
            console.log($paymoney.val());
            console.log($(this).text());
            $paymoney.val($paymoney.val() + $(this).text());
        });

        $(".pay").click(function () {
            layer.alert("支付的金额为：" + $paymoney.val());
        });
    });
</script>
</html>

